import React, { useCallback, useMemo, useState } from 'react';
import { withRouter } from 'react-router-dom';
import { Button, Form, Input, Icon, message } from 'antd';
import CaptchaCode from './components/CaptchaCode';

import './index.less';

const Login = props => {
  console.log(props, 9999);
  const { form, userLogin, history } = props;
  const [type, setType] = useState('login');

  const isLogin = useMemo(
    () => {
      return type === 'login';
    },
    [type]
  );

  const handleFinishValues = useCallback(
    async e => {
      e.preventDefault();
      try {
        const { username, password, captchaCode } = form?.getFieldsValue();
        const data = { username, password, captchaCode };
        const { msg, success } = await userLogin(data);
        if (success) {
          message.success({
            content: msg
          });
          history.push('/overview');
        }
        else {
          message.error({
            content: msg
          });
        }
      } catch (error) {
        message.error({
          content: error
        });
      }
    },
    []
  );

  const handleTapType = useCallback(
    type => {
      console.log(type, 123);
      setType(type);
    },
    [type]
  );

  return (
    <div className='login-page-container'>
      <div className='login-manager-container'>
        <h2>电商后台管理系统</h2>
        <Form
          name="loginUser"
          onSubmit={handleFinishValues}
        >
          <Form.Item
            className='username'
            name="username"
            label="用户名"
          >
            {
              form?.getFieldDecorator('username')(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="请输入用户名"
                />
              )
            }
          </Form.Item>
          <Form.Item
            className='password'
            name="password"
            label="密码"
          >
            {
              form?.getFieldDecorator('password')(
                <Input.Password
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="请输入密码"
                />
              )
            }
          </Form.Item>
          <Form.Item
            className='captchaCode'
            name="captchaCode"
            label="验证码"
          >
            {
              form?.getFieldDecorator('captchaCode')(
                <CaptchaCode />
              )
            }
          </Form.Item>
          <Form.Item
            className='btn'
          >
            <Button type="primary" htmlType="submit">
              { isLogin ? '登录' : '注册'}
            </Button>
          </Form.Item>
        </Form>
        {
          isLogin ? (
            <div className='login-user-type'>
              <span>当前无账号，请</span>
              <span className='register-user' onClick={() => handleTapType('register')}>
                注册
              </span>
            </div>
          ) : (
            <div className='login-user-type'>
              <span>已有账号，请</span>
              <span className='login-user' onClick={() => handleTapType('login')}>
                登录
              </span>
            </div>
          )
        }
        
      </div>
    </div>
  );
};


export default Form.create({ name: 'normal_login' })(withRouter(Login));